<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例1</title>
    <style>
        body{
            background: url("bg.png");
        }
        [type=username]{
            color: red;
        }
    </style>
</head>
<body>
<form action="#"method="get"autocomplete="off">
    <label for="username"> 用户名</label>
   <input type="test"id="username" name="username"placeholder="请输入用户名">
    <button type="submit">提交</button>
    <button type="result">重制</button><br/>
    <label for="password"> 密码</label>
    <input type="test"id="password" name="password"placeholder="请输入密码"><br/>
    <label for="email"> 邮箱</label>
    <input type="test"id="email" name="email"placeholder="请输入邮箱"><br/>
    <label for="phonenumber"> 手机号</label>
    <input type="test"id="phonenumber" name="phonenumber"placeholder="请输入手机号"><br/>
    <label for="gender"> 性别</label>
    <input type="radio"id="gender" name="gender"value="man">男
    <input type="radio" name="gender"value="voman">女<br/>
    <label for="hobby"> 爱好</label>
    <input type="checkbox"id="hobby" name="hobby"value="music">音乐
    <input type="checkbox" name="hobby"value="move">看电影
    <input type="checkbox" name="hobby"value="paleybaskateball">打篮球<br/>
    <label for="birthday"> 生日</label>
    <input type="date"id="birthday" name="birthday"value="birthday"><br/>
    <label for="insert"> 注册日期</label>
    <input type="datetime-loca"id="insert" name="insert"><br/>
    <label for="age"> 年龄</label>
    <input type="number"id="age" name="age"><br/>
    <label for="range"> 心情值（1~10）</label>
    <input type="range"id="range" name="range"min="1"max="10"step="1"><br/>
    <label for="file"> 文件上传</label>
    <input type="file"id="file" name="file">
</form>
</body>
</html>